<!-- 设备列表 1: 性诱测报列表  2 虫情监测列表  3 监控设备列表  4 小气候设备列表  -->
<template>
	<view :class="['page', { iphoneX: isIphoneX }]" style="display: flex;flex-direction: column;">
		<template v-if="token && isLogin">
			<view class="search-ctrl" style="background-color: #fff;height: 100rpx;flex-shrink: 0;">
				<view class="search-bar">
					<view class="iconfont f-s34">&#xe663;</view>
					<input type="text" confirm-type="search" v-model="params.keywork" class="sc-inp" placeholder="请输入地址" @confirm="searchScan" />
				</view>
			</view>

			<map
				id="map"
				ref="map"
				scale="6"
				:show-location="true"
				:latitude="latitude"
				:longitude="longitude"
				@markertap="getDevDetail"
				@regionchange="regionChange"
				:markers="markers"
				style="flex: 1;width: 100%;height: 300rpx;"></map>
			<!-- :circles="circles" -->

			<!-- <view class="test">{{ err }}--{{ errNum }}</view> -->

			<view class="footer-dev-info">
				<view class="dev-des">
					<view class="dev-name">
						<view class="name">{{ dev_info.name }}</view>
						<view class="num">{{ dev_info.count }}台</view>
					</view>
					<view class="dev-pic">
						<image :src="WEB_HOST + dev_info.url_file" mode="widthFix"></image>
					</view>
				</view>
				<!-- #ifndef APP-PLUS -->
				<view class="change-dev-picker" @click="showPopup('show', 'isChangeType')">
					<view class="select-name">切换设备</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="change-dev-picker" @click="showNVueSelectDev">
					<view class="select-name">切换设备</view>
				</view>
				<!-- #endif -->
			</view>
		</template>

		<!-- 弹窗 -->
		<view v-if="popupFlag.isFullPage" class="full-fix-page">
			<!-- 设备详情 -->
			<view v-if="popupFlag.isDevInfo" class="popup-wrap a-fadein">
				<view class="dev-info-area">
					<view class="dev-info">
						<view class="pic" v-if="dev_info.typeid!=33">
							<image v-if="detail.file_path" :src="WEB_HOST + '/report/image.do?path=' + detail.file_path + '&type=1'" mode="widthFix"></image>
							<image v-else src="@/static/images/filter_bg.png" mode="widthFix"></image>
						</view>
						<view class="info">
							<view class="dev-name">{{ detail.name }}</view>
							<view class="address split-line">{{ detail.address }}</view>
						</view>
					</view>
					<view class="btn-bar">
						<view class="btn close" @click="showPopup('hide')">关闭</view>
						<view class="btn" @click="goData">{{ dataBtnText }}</view>
						<view class="btn" @click="goDeatil">设备详情</view>
					</view>
				</view>
			</view>

			<!-- 切换设备类型 -->
			<view v-if="popupFlag.isChangeType" class="picker-bottom-wrap">
				<view class="hd">
					<view class="cancle" @click="showPopup('hide')">取消</view>
					<view class="confirm" @click="comfirmType">确定</view>
				</view>
				<picker-view indicator-class="indicatorClass" class="picker-view-wrap row-2" :value="changeType" @change="changeDevType">
					<picker-view-column class="item-column">
						<view class="item" v-for="(item, index) in dev_info.data" :key="index">{{ item.name }}</view>
					</picker-view-column>
					<picker-view-column class="item-column">
						<view class="item" v-for="(item, index) in dev_info.child" :key="index">{{ item.name }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	import { WEB_HOST, map_key, gaode_key } from '@/config.js';
	import QQMapWX from '@/common/map/qqmap-wx-jssdk.min.js';
	import loading from '@/components/loading-more.vue';
	import { getSystemInfo } from '@/common/promise.js';
	import permision from '@/common/permission.js';
	export default {
		name: '',
		data() {
			return {
				isIphoneX: getApp().globalData.isIphoneX,
				token: uni.getStorageSync('token'),
				appid: getApp().globalData.appid,
				userInfo: uni.getStorageSync('userInfo'),
				isLogin: false,
				popupFlag: {
					isFullPage: false,
					isDevInfo: false,
					isChangeType: false
				},
				address: {
					city: '',
					district: '',
					street: ''
				},
				latitude: '',
				longitude: '',
				markers: [],
				controls: [{
					id: 1,
					position: {
						left: 0,
						top: 0,
						width: 30,
						height: 30
					},
					iconPath: '/static/images/local_icon_fixed.png'
				}],
				devList: [],
				params: {
					page: 1,
					limit: 20,
					keywork: ''
				},
				dev_info: {
					type: '',
					name: '',
					data: [],
					child: [],
					sub: [],
					count: '',
					url_file: '',
					typeid: ''
				},
				loadingState: {
					loading: true
				},
				changeType: [],
				detail: {},
				img_path: getApp().globalData.image_path,
				WEB_HOST: WEB_HOST,
				timer: null,
				isStartTimer: true,
				isDataOver: null,
				dataBtnText: '',
				detailUrl: ''
				// circles: [
				// 	{
				// 		latitude: '23.12',
				// 		longitude: '113.22',
				// 		color: '#ff00000A',
				// 		fillColor: '#ff00003A',
				// 		radius: '50'
				// 	},
				// 	{
				// 		latitude: '23.22',
				// 		longitude: '113.33',
				// 		color: '#ff00000A',
				// 		fillColor: '#ff00003A',
				// 		radius: '50'
				// 	},
				// 	{
				// 		latitude: '23.33',
				// 		longitude: '113.44',
				// 		color: '#ff00000A',
				// 		fillColor: '#ff00003A',
				// 		radius: '50'
				// 	}
				// ]
			};
		},
		async onLoad(params) {
			console.log(123, params);
			if (params.dev_type) {
				this.dev_info.type = params.dev_type;
				this.dev_info.typeid = params.typeid;
				this.dev_info.name = params.dev_name;
				this.dev_info.count = params.dev_count;
				this.dev_info.url_file = params.url_file;
				this.changeType = params.changetype.split('-');
			}

			getSystemInfo().then(res => {
				this.controls[0].position.left = (res.screenWidth - 30) / 2;
				this.controls[0].position.top = (res.screenHeight - 30) / 2;
			});
			if (this.token) {
				this.isLogin = await this.$loginState('check');
				if (this.isLogin) {
					this.dev_info.data = await this.getDevType();
					if (this.changeType[0] != '') {
						if (this.dev_info.data[this.changeType[0]].has_dev && this.dev_info.data[this.changeType[0]].has_dev.length > 0) {
							this.dev_info.child = this.dev_info.data[this.changeType[0]].has_dev;
						}
					}
					if (!this.dev_info.type) {
						this.setDefaultDev();
					}
					this.getDeviceList();
				} else {
					this.isLogin = await this.$loginState('reset');
				}
			}

			// #ifdef APP-PLUS
			uni.$on('comfirmType', data => {
				this.changeType = data;
				this.comfirmType();
			});
			// #endif
		},
		async onShow() {
			if (this.loginStateUpdate) {
				this.token = uni.getStorageSync('token');
				this.userInfo = uni.getStorageSync('userInfo');
				this.isLogin = true;
				this.dev_info.data = await this.getDevType();
				this.getDeviceList();
				this.loginStateUpdate = false;
			}

			// 退回地图页面,数据未加载完成继续加载
			if (this.isDataOver != 0 && this.isDataOver != null) {
				this.isStartTimer = true;
				this.getDeviceList();
			}

			if (!this.token && !this.isLogin) {
				this.isLogin = await this.$loginState('reset');
			}
		},

		onReady() {

			// #ifndef APP-PLUS
			this.getLocation();
			// #endif

			// #ifdef APP-PLUS
			this.requestAndroidPermission('android.permission.ACCESS_FINE_LOCATION', "位置信息");
			// #endif

			// #ifdef APP-PLUS
			uni.getSubNVueById('dev_detail').hide();
			uni.getSubNVueById('dev_picker').hide();
			// #endif
		},

		onHide() {
			this.isStartTimer = false;
		},
		onUnload() {
			this.isStartTimer = false;
		},
		methods: {
			// 初始化数据
			dataInit: function() {
				this.markers = [];
				this.devList = [];
				this.params.page = 1;
				this.isDataOver = null;
				this.isStartTimer = true;
			},

			async requestAndroidPermission(permisionID, name) {
				var result = await permision.requestAndroidPermission(permisionID);
				console.log(result);
				var strStatus;
				if (result == 1) {
					strStatus = '已获得授权';
					this.getLocation();
				} else if (result == 0) {
					strStatus = '未获得授权';
				} else if (result == -1) {
					uni.showModal({
						title: '温馨提示',
						content: '检测到您未开启' + name + '权限,是否开启。',
						confirmText: '去设置',
						success(res) {
							if (res.confirm) {
								permision.gotoAppPermissionSetting();
							}
						}
					});
				}
			},

			//选择设备弹窗
			showNVueSelectDev() {
				let dev_picker = uni.getSubNVueById('dev_picker');
				//传数据到nvue
				console.log('切换设备传入nvue', { ...this.dev_info, changeType: this.changeType });
				uni.$emit('dev_picker', { ...this.dev_info, changeType: this.changeType });
				dev_picker.show();
			},

			// 获取设备类型
			getDevType: async function() {
				let res = await this.$api.tool_api.getDevTypeCount({
					appid: this.appid,
					token: this.token,
					user_id: this.userInfo.uid
				});
				if (res.data.ret == 1000) {
					this.loadingState.loading = false;
					let data = [];
					res.data.data.forEach(item => {
						if (item.child.length > 0) {
							let has_dev = [];
							item.child.forEach(subitem => {
								if (subitem.count > 0) {
									has_dev.push(subitem);
									item.has_dev = has_dev;
								}
							});
						}
						if ((item.has_dev && item.has_dev.length > 0) || item.count > 0) {
							data.push(item);
						}
					});
					return data;
				}
			},

			// 切换设备类型
			changeDevType: function(e) {
				// console.log(this.changeType)
				// console.log(this.dev_info.data)
				if (this.changeType[0] != e.detail.value[0]) {
					this.changeType = [e.detail.value[0], 0];
				} else {
					this.changeType = e.detail.value;
				}
				if (this.dev_info.data[this.changeType[0]].child.length > 0) {
					this.dev_info.child = this.dev_info.data[this.changeType[0]].has_dev;
				} else {
					this.dev_info.child = [];
				}
			},

			// 设置默认设备类型
			setDefaultDev: function() {
				if (this.dev_info.data[0].child.length > 0) {
					this.dev_info.type = this.dev_info.data[0].child[0].number;
					this.dev_info.typeid = this.dev_info.data[0].child[0].id;
					this.dev_info.name = this.dev_info.data[0].child[0].name;
					this.dev_info.count = this.dev_info.data[0].child[0].count;
					this.dev_info.url_file = this.dev_info.data[0].child[0].url_file;
				} else {
					this.dev_info.type = this.dev_info.data[0].number;
					this.dev_info.typeid = this.dev_info.data[0].id;
					this.dev_info.name = this.dev_info.data[0].name;
					this.dev_info.count = this.dev_info.data[0].count;
					this.dev_info.url_file = this.dev_info.data[0].url_file;
				}
			},

			// 确定设备类型
			comfirmType: function() {
				if (this.dev_info.data[this.changeType[0]].has_dev && this.dev_info.data[this.changeType[0]].has_dev.length > 0) {
					this.dev_info.type = this.dev_info.data[this.changeType[0]].has_dev[this.changeType[1]].number;
					this.dev_info.typeid = this.dev_info.data[this.changeType[0]].has_dev[this.changeType[1]].id;
					this.dev_info.name = this.dev_info.data[this.changeType[0]].has_dev[this.changeType[1]].name;
					this.dev_info.count = this.dev_info.data[this.changeType[0]].has_dev[this.changeType[1]].count;
					this.dev_info.url_file = this.dev_info.data[this.changeType[0]].has_dev[this.changeType[1]].url_file;
				} else {
					this.dev_info.type = this.dev_info.data[this.changeType[0]].number;
					this.dev_info.typeid = this.dev_info.data[this.changeType[0]].id;
					this.dev_info.name = this.dev_info.data[this.changeType[0]].name;
					this.dev_info.count = this.dev_info.data[this.changeType[0]].count;
					this.dev_info.url_file = this.dev_info.data[this.changeType[0]].url_file;
				}

				this.dataInit();
				this.getDeviceList();
				this.showPopup('hide');
			},

			// 获取设备列表
			getDeviceList: async function() {
				// console.log('执行');
				let res;
				if (this.dev_info.typeid == 33) {
					res = await this.$api.zncp_api.getDevList({
						appid: this.appid,
						token: this.token,
						user_id: this.userInfo.uid,
						page: this.params.page,
						limit: this.params.limit,
						keyword: this.params.keywork
					})
					if (res.data.ret == 0) {
						res.data.data.list.forEach(item => {
							let marker = {
								id: parseInt(item.id),
								latitude: parseFloat(item.gcj02_lat),
								longitude: parseFloat(item.gcj02_lng),
								iconPath: '/static/images/local_icon.png',
								width: 30,
								height: 30
							};
							this.markers = this.markers.concat(marker);
						});
						this.devList = this.devList.concat(res.data.data.list);
						if (res.data.data.length == this.params.limit) {
							this.params.page++;
							this.isDataOver = this.params.page;
							if (this.isStartTimer) {
								clearTimeout(this.timer);
								this.timer = setTimeout(() => {
									this.getDeviceList();
								}, 1000);
							}
						} else {
							clearTimeout(this.timer);
							this.isStartTimer = false;
							this.isDataOver = 0;
						}
					} else {
						this.$showToast({
							icon: '/static/images/error.png',
							title: res.data.msg
						});
					}
				} else {
					res = await this.$api.tool_api.getDeviceList({
						appid: this.appid,
						token: this.token,
						device_type: this.dev_info.type,
						user_id: this.userInfo.uid,
						page: this.params.page,
						limit: this.params.limit,
						typeid: this.dev_info.typeid
					});
					if (res.data.ret == 1000) {
						res.data.data.forEach(item => {
							let marker = {
								id: parseInt(item.id),
								latitude: parseFloat(item.gcj02_lat),
								longitude: parseFloat(item.gcj02_lng),
								iconPath: '/static/images/local_icon.png',
								width: 30,
								height: 30
							};
							this.markers = this.markers.concat(marker);
						});
						this.devList = this.devList.concat(res.data.data);
						if (res.data.data.length == this.params.limit) {
							this.params.page++;
							this.isDataOver = this.params.page;
							if (this.isStartTimer) {
								clearTimeout(this.timer);
								this.timer = setTimeout(() => {
									this.getDeviceList();
								}, 1000);
							}
						} else {
							clearTimeout(this.timer);
							this.isStartTimer = false;
							this.isDataOver = 0;
						}
					} else if (res.data.ret == 1002) {
						this.$showToast({
							icon: '/static/images/error.png',
							title: res.data.msg
						});
					}
				}
			},

			// 获取当前地址
			getLocation: function() {
				let _this = this;
				uni.getLocation({
					type: 'gcj02',
					async success(localRes) {
						// #ifndef APP-PLUS
						let qqmapsdk = new QQMapWX({
							key: map_key
						});
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: localRes.latitude,
								longitude: localRes.longitude
							},
							success: function(res) {
								_this.address.city = res.result.address_component.city;
								_this.address.district = res.result.address_component.district;
								_this.address.street = res.result.address_component.street;
							}
						});
						// #endif

						// #ifdef APP-PLUS
						var res = await _this.$api.tool_api.getCityInfo({
							key: gaode_key,
							location: parseFloat(localRes.longitude) + ',' + parseFloat(localRes.latitude)
						});
						console.log('-------------------', res);
						if (res.data.status == 1) {
							let { regeocode } = res.data;
							_this.address.city = regeocode.addressComponent.city;
							_this.address.district = regeocode.addressComponent.district;
							_this.address.street = regeocode.addressComponent.streetNumber.street;
						}
						// #endif

						setTimeout(() => {
							let mapContext = uni.createMapContext('map');
							mapContext.moveToLocation({
								latitude: parseFloat(localRes.latitude),
								longitude: parseFloat(localRes.longitude)
							});
							// _this.circles[1].latitude = localRes.latitude;
							// _this.circles[1].longitude = localRes.longitude;
							// _this.circles[1].radius = 50;
							// console.log(_this.circles);
						}, 300);
					},
					fail(err) {
						console.log('uni.getlocation-err', JSON.stringify(err));
						// #ifdef MP-WEIXIN
						if (err.errMsg == 'getLocation:fail auth deny') {
							uni.showModal({
								title: '温馨提示',
								content: '检测到您未开启位置信息权限,是否开启。',
								confirmText: '去设置',
								success(res) {
									if (res.confirm) {
										uni.openSetting();
									}
								}
							});
						}
						// #endif
					}
				});
			},

			// 获取设备详情
			getDevDetail: function(e) {
				this.detail = {};

				//点击标记
				let id = e.detail.markerId;
				if (id == '12345678') return;
				this.devList.forEach(async item => {
					if (item.id == id) {
						this.detail.number = item.number || item.sb_number2;
						this.detail.dev_number = item.dev_number;
						this.detail.dev_id = item.id;
						this.detail.dev_type = this.dev_info.type;
						this.detail.name = item.NAME || item.device_name || item.cameraName || item.name || item.dev_name || item.device_number;
						this.detail.file_path = item.file_path;
						if (this.dev_info.typeid == 33) {
							this.detail.address = item.remark || item.address || '不祥';
						} else {
							this.detail.address = item.remark == null ? '不详' : item.remark;
						}
					}
				});

				console.log('----', this.devList);

				this.setDataBtnText();

				// #ifndef APP-PLUS
				this.showPopup('show', 'isDevInfo');
				// #endif

				// #ifdef APP-PLUS
				uni.getSubNVueById('dev_detail').show();
				console.log('打开详情:', this.detail);
				uni.$emit('showDevDetail', { ...this.detail, dataBtnText: this.dataBtnText, detailUrl: this.detailUrl });
				console.log('detail-end');
				// #endif
			},

			// 显示弹窗
			showPopup: function(t, n) {
				if (t == 'show') {
					this.popupFlag.isFullPage = true;
					this.popupFlag[n] = true;
				} else if (t == 'hide') {
					for (let i in this.popupFlag) {
						this.popupFlag[i] = false;
					}
				}
			},

			// 跳转详情
			goDeatil: function() {
				if (this.dev_info.typeid == 33) {
					uni.navigateTo({
						url: `/package_zhinengcipan/detail/detail?number=${this.detail.number}`
					});
				} else {
					uni.navigateTo({
						url: `/package_common/detail/detail?number=${this.detail.number}`
					});
				}
			},

			// 设置数据查看按钮文案及url
			setDataBtnText: function() {
				switch (this.dev_info.type) {
					case '1': // 性诱设备
						this.dataBtnText = '查看数据';
						this.detailUrl = `/package_xingyou/pest_data/pest_data?type=data&dev_name=${this.detail.name}&dev_id=${this.detail.dev_id}&dev_type=${
						this.dev_info.type
					}&typeid=${this.dev_info.typeid}`;
						break;

					case '2': // 虫情测报
						this.dataBtnText = '识别图像';
						this.detailUrl = `/package_pests/pic_data/pic_data?dev_name=${this.detail.name}&dev_id=${this.detail.dev_id}&dev_type=${this.dev_info.type}&typeid=${
						this.dev_info.typeid
					}`;
						break;

					case '3': // 监控
						this.dataBtnText = '监控图像';
						this.detailUrl = `/package_jiankong/pic_data/pic_data?dev_name=${this.detail.name}&dev_id=${this.detail.dev_id}&dev_type=${this.dev_info.type}&typeid=${
						this.dev_info.typeid
					}`;
						break;

					case '4': // 小气候
						this.dataBtnText = '查看数据';
						this.detailUrl = `/package_xiaoqihou/data_data/data_data?dev_name=${this.detail.name}&dev_model=${this.detail.dev_number}&dev_type=${
						this.dev_info.type
					}&typeid=${this.dev_info.typeid}`;
						break;

					case '5': // 杀虫灯
						this.dataBtnText = '查看数据';
						this.detailUrl = `/package_xiaoqihou/data_data/data_data?dev_name=${this.detail.name}&dev_model=${this.detail.dev_number}&dev_type=${
						this.dev_info.type
					}&typeid=${this.dev_info.typeid}`;
						break;

					case '6': // 转盘式杀虫灯
						this.dataBtnText = '查看数据';
						this.detailUrl = `/package_xiaoqihou/data_data/data_data?dev_name=${this.detail.name}&dev_model=${this.detail.dev_number}&dev_type=${
						this.dev_info.type
					}&typeid=${this.dev_info.typeid}`;
						break;

					case '7': // 智能风吸式杀虫灯
						this.dataBtnText = '查看数据';
						this.detailUrl = `/package_xiaoqihou/data_data/data_data?dev_name=${this.detail.name}&dev_model=${this.detail.dev_number}&dev_type=${
						this.dev_info.type
					}&typeid=${this.dev_info.typeid}`;
						break;

					case '8': // 天牛
						this.dataBtnText = '虫害数据';
						this.detailUrl = `/package_tianniu/pest_data/pest_data?type=data&dev_name=${this.detail.name}&dev_id=${this.detail.dev_id}&dev_type=${
						this.dev_info.type
					}&typeid=${this.dev_info.typeid}`;
						break;

					case '9': // 全景
						this.dataBtnText = '全景图像';
						this.detailUrl = `/package_quanjin/data_data/data_data?type=data&dev_name=${this.detail.name}&dev_id=${this.detail.dev_id}&dev_type=${
						this.dev_info.type
					}&typeid=${this.dev_info.typeid}`;
						break;

					case '10': // 显示屏
						this.dataBtnText = '查看数据';
						this.detailUrl = `/package_xianshiping/data_data/data_data?dev_name=${this.detail.name}&dev_number=${this.detail.dev_number}&dev_type=${
						this.dev_info.type
					}&typeid=${this.dev_info.typeid}`;
						break;

					case '11': // 自动清虫杀虫灯
						this.dataBtnText = '清虫状况';
						this.detailUrl = `/package_shachongdeng/pest_data/pest_data?dev_name=${this.detail.name}&dev_id=${this.detail.dev_id}&dev_type=${this.dev_info.type}`;
						break;

					case '12': // 实蝇
						this.dataBtnText = '虫害数据';
						this.detailUrl = `/package_shiying/pest_data/pest_data?type=data&dev_name=${this.detail.name}&dev_id=${this.detail.dev_id}&dev_type=${this.dev_info.type}&typeid=${this.dev_info.typeid}`;
						break;
					case '19': // 虫情测报
						this.dataBtnText = '识别图像';
						this.detailUrl = `/package_huangban/pic_data/pic_data?dev_name=${this.detail.name}&dev_id=${this.detail.dev_id}&dev_type=${this.dev_info.type}&typeid=${this.dev_info.typeid}`;
						break;
				}
			},

			// 查看数据
			goData: function() {
				uni.navigateTo({
					url: this.detailUrl
				});
			},

			regionChange: function(e) {
				let _this = this;
				if (e.type == 'end') {
					let qqmapsdk = new QQMapWX({
						key: map_key
					});
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: e.detail.centerLocation.latitude,
							longitude: e.detail.centerLocation.longitude
						},
						success: function(res) {
							_this.address.city = res.result.address_component.city;
							_this.address.district = res.result.address_component.district;
							_this.address.street = res.result.address_component.street;
						}
					});
				}
			},

			//搜索地址
			searchScan() {
				console.log('搜索地址');
				let qqmapsdk = new QQMapWX({
					key: map_key
				});
				try {
					let _this = this;
					qqmapsdk.geocoder({
						address: _this.params.keywork,
						success(res) {
							console.log('地址', res);
							if (res.status === 0) {
								let { lng, lat } = res.result.location;
								let map = uni.createMapContext('map', _this);
								map.moveToLocation({
									longitude: lng,
									latitude: lat
								});
								// for(let i=0; i< _this.markers.length; i){}
								// let marker = {
								// 	id: 12345678,
								// 	latitude: lat,
								// 	longitude: lng,
								// 	iconPath: '/static/images/mark3.png',
								// 	width: 30,
								// 	height: 30
								// };
								// _this.markers = _this.markers.concat(marker);
							} else {
								uni.showToast({
									title: '请求错误',
									icon: 'error'
								});
							}
						}
					});
				} catch (e) {
					console.log('err', e); //TODO handle the exception
				}
				// //搜索设备编号
				// console.log('搜索');
				// this.dataInit();
				// this.getSearchDev();
			}
		},
		computed: {},
		components: {
			loading
		}
	};
</script>

<style lang="less">
	.page {
		width: 100%;
		height: 100%;
	}

	#map {
		width: 100%;
		height: 100%;
	}

	.address-bar {
		display: flex;
		padding-left: 42px;
		height: 32px;
		line-height: 32px;
		font-size: 28rpx;

		.city {
			display: flex;

			.name {
				margin-right: 5rpx;
			}
		}

		.address {
			.line {
				margin: 0 10rpx;
				color: #ddd;
			}
		}
	}

	.iphoneX .footer-dev-info {
		padding-bottom: 60rpx;
	}

	.footer-dev-info {
		// position: fixed;
		// left: 0;
		// bottom: 0;
		// z-index: 100;
		width: 100%;
		margin: 0 auto;
		height: 240rpx;
		flex-shrink: 0;
		padding-bottom: 30rpx;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
		// padding:20rpx ;
		background: rgba(245, 245, 245, 0.8);
	}

	.loading {
		flex-grow: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.change-dev-picker {
		display: flex;
		justify-content: center;
		width: 90%;
		height: 80rpx;
		margin: 0 auto;
		background: #09f;
		border-radius: 38rpx;

		.select-name {
			padding: 0 20rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			color: #fff;
		}
	}

	.dev-des {
		display: flex;
		align-items: center;
		width: 90%;
		margin: 20rpx auto 20rpx;
		height: 120rpx;
		padding: 10rpx 20rpx;
		background: #fff;
		border-radius: 15rpx;

		.dev-name {
			flex-grow: 2;

			.name {
				margin-bottom: 10rpx;
				font-size: 30rpx;
			}

			.num {
				font-size: 28rpx;
				color: #999;
			}
		}

		.dev-pic {
			flex-shrink: 0;
			display: flex;
			justify-content: cetner;
			align-items: center;
			width: 120rpx;
			height: 120rpx;
			overflow: hidden;

			image {
				width: 100%;
			}
		}
	}
</style>